<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: #333;
			}
			#div1{
				background: white;
				width: 600px;
				margin: 20px auto;
			}
		</style>
		<script>
			window.onload = function(){
				var oC1 = document.querySelector("#c1");
				var oG1 = oC1.getContext('2d');
				var i = 0;
				var oImg = new Image();
				oImg.src = 'person.png';
				oImg.onload = function(){
					setInterval(function(){
						oG1.clearRect(0,0,oC1.width,oC1.height);
						oG1.beginPath();
						oG1.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
						oG1.stroke();
						oG1.beginPath();
						oG1.arc(250,200,150,-180*Math.PI/180,0,false);
						oG1.stroke();
						oG1.beginPath();
						oG1.arc(400,200,20,0,360*Math.PI/180,false);
						oG1.stroke();
						for( var i = 0; i<ball.length; i++ ){
							oG1.beginPath();
							oG1.moveTo(ball[i].x,ball[i].y);
							oG1.arc(ball[i].x,ball[i].y,20,0,360*Math.PI/180,false);
							oG1.fill();
						};
						oG1.save();
						oG1.translate(300,200);
						oG1.rotate(iRotate);
						oG1.translate(-40,-40);
						oG1.drawImage(oImg,0,0);
						oG1.restore();
						
						for( var i = 0; i<bullet.length; i++ ){
							oG1.save();
							oG1.fillStyle = "red";
							oG1.beginPath();
							oG1.moveTo(bullet[i].x,bullet[i].y);
							oG1.arc(bullet[i].x,bullet[i].y,20,0,360*Math.PI/180,false);
							oG1.fill();
							oG1.restore();
						};
					},1000/60);
					
					setInterval(function(){
						for( var i = 0; i<ball.length;i++ ){
							ball[i].num++;
							if( ball[i].num == 270 ){
								ball[i].r = 150;
								ball[i].startX = 250;
								ball[i].startY = 50;
							};
							if( ball[i].num == 270 + 180 ){
								alert('游戏结束');
								window.location.reload();
							};
							ball[i].x = Math.sin(ball[i].num*Math.PI/180)*ball[i].r + ball[i].startX;
							ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180)*ball[i].r + ball[i].startY;
						};
						for( var i=0; i<bullet.length; i++ ){
							bullet[i].x = bullet[i].x + bullet[i].sX;
							bullet[i].y = bullet[i].y + bullet[i].sY;
						};
						for( var i=0; i<bullet.length; i++  ){
							for( var j = 0; j<ball.length;j++ ){
								if( pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y) ){
									bullet.splice(i,1);
									ball.splice(j,1);
									break;
								}
							}
						}
					},30);
					var ball = [];
					
					setInterval(function(){
						ball.push({
							x:300,
							y:0,
							r:200,
							num : 0,
							startX : 300,
							startY : 0
						});
					},350);
					var iRotate = 0;
					oC1.onmousemove = function(ev){
						var ev = ev || window.event;
			
						var x = ev.clientX - oC1.offsetLeft;
						var y = ev.clientY - oC1.offsetTop;
						
						var a = x - 300;
						var b = y - 200;
						
						var c = Math.sqrt(a*a + b*b);
						
						if(a>0 && b>0){
							iRotate = Math.asin(b/c) + 90*Math.PI/180;
						}
						else if(a>0){
							iRotate = Math.asin(a/c);
						}
						
						if(a<0 && b>0){
							iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
						}
						else if(a<0){
							iRotate = Math.asin(a/c);
						};
					};
					var bullet = [];
					oC1.onmousedown = function(){
						var ev = ev || window.event;
			
						var x = ev.clientX - oC1.offsetLeft;
						var y = ev.clientY - oC1.offsetTop;
						
						var a = x - 300;
						var b = y - 200;
						var c = Math.sqrt(a*a + b*b);
						var speed = 5;
						var sX = speed * a/c;
						var sY = speed * b/c;
						bullet.push({
							x:300,
							y:200,
							sX : sX,
							sY : sY
						})
					}
				};
				function pz(x1,y1,x2,y2){
					var a = x1-x2;
					var b = y1-y2;
					var c = Math.sqrt(a*a+b*b);
					if( c<40 ){
						return true;
					}else{
						return false;
					};
				};
				
				
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<canvas id="c1" width="600" height="600"></canvas>
		</div>
	</body>
</html>
